<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				color:#fff;
				text-align: center;
				font-size:24px;
			}
			.side{
				width:200px;
				height:200px;
				line-height:200px;
			}
			.wrapper{
				position: relative;
				transform-style: preserve-3d;
				overflow: visible;
				margin:300px auto;
				transition: all 1s cubic-bezier(0.32, 0.01, 0, 1.3);
				transform:rotateX(-15deg) rotateY(30deg);
			}
			.cover{
				position:absolute;
			}
			.front{
				background: black;
				transform:translateZ(100px);
			}
			.top{
				transform:rotateX(90deg) translateZ(100px);
				background: blue;
			}
			.left{
				transform: rotateY(90deg)  translateZ(100px);
				background: red;
			}
			.right{
				transform: rotateY(-90deg)  translateZ(100px);
				background: green;
			}
			.back{
				transform: translateZ(-100px);
				background:gray;
			}
			input[type="text"]{
				width:150px;
				height:60px;
				line-height: 60px;
				text-align: center;
				font-size: 14px;
				font-family: "华文行楷";
				border-radius: 203% 0% 221% 11%;
				background: rgba(255,255,255,0.2);
				outline:medium;
			}
			input[type="submit"]{
				width:150px;
				height:60px;
				line-height: 60px;
				text-align: center;
				font-size: 14px;
				font-family: "华文行楷";
				border-radius: 203% 0% 221% 11%;
				background: rgba(255,255,255,0.2);
				outline:medium;
				cursor: pointer;
			}
		</style>
    </head>
    <body>
    <div id="wrapper" class="wrapper side">
    	<div class="side cover front">
    		<input type="text" value="用户名" name = "user" id="user">
    	</div>
    	<div class="side cover top">
			<input type="text" value="密码" name = "password" id="password">
    	</div>
    	<div class="side cover left">梦</div>
    	<div class="side cover right"><input type="submit" value="登陆"></div>
    	<div class="side cover back">想</div>
    </div>
    </body>
    <script type="text/javascript">
    	var i=0;
    	var perStyle = '';
    	setInterval(function(){
    		var str ="rotateX("+i+"deg) "+"rotateY("+i*0.5+"deg)";
    		// document.getElementById('wrapper').style.transform =str;
    		i++;
    	}, 25)
    	user.onfocus = function(){
    		this.value = '';
    		perStyle = wrapper.style.transform;
			wrapper.style.transform = "rotateX(0deg) rotateY(0deg)";
    	}
    	user.onblur = function(){
    		wrapper.style.transform = perStyle;
    		if(this.value == '')
    			this.value = '用户名';
    	}
    	user.onkeydown = function(e){
    		var ev = e|| window.event;
    		if(ev.keyCode == 13){
    			document.getElementById('wrapper').style.transform = " rotateX(-115deg) rotateZ(30deg)";
    		}

    	}
    	password.onfocus = function(){
    		this.value = '';
    		perStyle = wrapper.style.transform;
    		wrapper.style.transform = "rotateX(-90deg)";
    	}
    	password.onblur = function(){
    		 wrapper.style.transform = perStyle;
    		if(this.value == '')
    			this.value = '密码';
    	}
    	password.onkeydown = function(e){
    		var ev = e|| window.event;
    		if(ev.keyCode == 13){
    			document.getElementById('wrapper').style.transform = " rotateY(90deg)";
    		}

    	}
    </script>
</html>
